import React, { useState } from 'react'
import axios from 'axios'
import Pubsub from 'pubsub-js'

export default function Header() {

  //点击按钮时获取表单数据
  //受控表单

  const [search, setSearch] = useState('')

  const changeSearchHandle = (e) => {
    setSearch(e.target.value)
  }

  //点击按钮时发送axios请求
  //发送请求加async,await
  const searchHandle = async () => {
    //还没发送axios请求的时候先发送一次数据
    Pubsub.publish('github',{isInit:false,isSearch:true,data:[]})

    const result = await axios.get(' https://api.github.com/search/users?q=' + search)
    // console.log(result);
    //把请求到的结果发送给List,通过发送订阅
    Pubsub.publish('github',{isInit:false,isSearch:false,data:result.data.items})

  }


  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input value={search} onChange={changeSearchHandle} type="text" placeholder="enter the name you search" />
        &nbsp;
        <button onClick={searchHandle}>Search</button>
      </div>
    </section>
  )
}
